<h2>Welcome to screen world</h2><br />
  feel free to search
  <form action="javascript:void(0)" name="searchfrm" id="searchfrm" method="post">
  <div class="search" id="">
      <label>First Name</label>
      <input type="text" id="fname" name="fname" />
      <label>Last Name</label>
      <input type="text" id="lname" name="lname" />
      <input type="submit" id="search" value="Search" />
      
  </div>
  </form>
  <div class="searchlist">

  </div>
<script>
    $(document).ready(function(){

      $("#search").click( function(){ 
        showLoading('Searching your records....');
        var pdata = $("#searchfrm").serialize();
        $.post('/index/search/',pdata,function(data){
        hideLoading();
        var searchlist = $.JSON.decode(data);
          if(searchlist.length>0)
          {
            showLoading('Please wait, Listing search records....');  
            var html = '<h2> Your Search Result:</h2>';
            html+='<table border="1" cellpadding="5" cellspacing="5" width="100%" style="background-color:green;border:1px dashed black;"><thead ><th>Name </th><th> Company </th><th> Email </th></thead>';          

            for(var i=0;i<searchlist.length;i++){
                html+='<tr><td>'+searchlist[i]['fname']+' '+searchlist[i]['lname']+'</td>';
                html+='<td>'+searchlist[i]['companyname']+'</td>';
                html+='<td>'+searchlist[i]['user_email']+'</td>';
                html+='</tr>';    
            }
             
              $(".searchlist").slideDown().html(html);
              hideLoading();
          }
          else
          {
            var html = '<h2 style="background-color:green;border:1px dashed black;"> Search keyword not matching:</h2>';
                $(".searchlist").slideDown().html(html);
          }    
        })
      })    

    })
</script>